<template>
    <div class="refund">
      <div class="top">
        <div class="title">距离还款日</div>
        <div class="content">15天</div>
      </div>
      <div class="center">
        <div class="left">
          <p class="name">到期还款日期</p>
          <p class="black">2018-10-12</p>
        </div>
        <div class="right">
          <p class="name">到期应还款</p>
          <p class="red">1000.00元</p>
        </div>
      </div>
      <div class="bottom">
        <button class="btn-up">线上还款</button>
        <button class="btn-down">线下还款</button>
      </div>
    </div>
</template>

<script>
    export default {
        name: "refund"
    }
</script>

<style scoped lang="stylus">
  .refund
    height calc(100% - 64px)
    overflow auto
    padding 10px 10px
    background #f6f6f6
    .top
      height 120px
      background #ffffff
      border-radius 6px
      box-shadow -2px 2px 5px rgba(160,160,160,.1)
      .title
        padding-top 24px
        font-size 14px
        color #333333
      .content
        height 66px
        line-height 66px
        font-size 30px
        color #49A2FE
    .center
      display flex
      margin-top 10px
      height 52px
      background #ffffff
      border-radius 6px
      box-shadow -2px 2px 5px rgba(160,160,160,.1)
      padding 18px 0
      .left,.right
        flex 1
        p
         height 26px
         line-height 26px
         font-size 16px
        .name
          color #737373
        .black
          color #333333
        .red
          color #FF723F

    .bottom
      margin-top 100px
      button
        width 100%
        border 1px solid #49A2FE
        height 44px
        outline none
        border-radius 6px
        font-size 17px
        &.btn-up
          color #ffffff
          background #49A2FE
          margin-bottom 10px
        &.btn-down
          color #49A2FE
          background none
</style>
